<template>
	<view class="container">
		<view class="address">
			<text>暴紫薇 131*****882</text>
			<text>河北省石家庄市桥西区宫北路11号</text>
			<image src="../../static/yjt.png" mode="widthFix" class="addressImg"></image>
		</view>
		<view class="orderMsg">
			<text class="omshop">超级店铺</text>
			<view class="goods-item">
				<image src="https://z3.ax1x.com/2021/04/24/cvuI1O.png" mode="heightFix"></image>

				<view class="itemMessage">
					<text class="messText">美国MAG海藻粉</text>
					<view class="messPrice">
						<text class="pricetext">￥99</text>
						<text>1.5kg*1</text>
					</view>
				</view>
			</view>
			<view class="distribution">
				<text>配送方式</text>
				<view class="">
					<text>普通配送</text>
					<text>配送费￥3.6</text>
				</view>
			</view>
			<view class="num">
				<text>购买数量</text>
				<text>*1</text>
			</view>
		</view>

		<view class="orderMsg">
			<view class="coupon num">
				<view>
					优惠券
					<image src="../../static/wh.png" mode="widthFix"></image>
				</view>
				<text>-￥5.00</text>
			</view>
			<view class="num jgbm">
				<text>价格向收货人保密</text>
				<image src="../../static/xz2.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="submitOrder">
			
			<view class="">
				<text>价格</text>
				<text>￥97.6</text>
			</view>
			<view>提交订单</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style scoped>
	.submitOrder{
		height: 98rpx;
		width: 100vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		font-size: 28rpx
		}
		.submitOrder text:nth-of-type(2){
			color: rgb(255, 149, 64);
			
		}
		.submitOrder view:nth-of-type(2){
			color: #fff;
			padding: 20rpx 50rpx;
			background-color: rgb(255, 149, 64);
			border-radius: 40rpx;
			}
.jgbm image {
	width: 30rpx;
}
.coupon image {
	width: 30rpx;
	vertical-align: middle;
	margin-left: 20rpx;
}
.coupon text {
	color: #333;
}
.num {
	font-size: 24rpx;
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
}
.num text:nth-of-type(2) {
	color: #333;
}
.distribution {
	display: flex;
	font-size: 24rpx;
	color: #333;
	margin-top: 10rpx;
}
.distribution view {
	flex: 1;
	margin-left: 20rpx;
	display: flex;
	justify-content: space-between;
	color: #666;
}

.goods-item {
	height: 20vw;
	width: 100%;
	display: flex;
	/* padding:  0 30rpx; */
	/* box-sizing: border-box; */
	margin: 10rpx 0;
	background-color: #fff;
}
.goods-item image:nth-of-type(1) {
	height: 100%;
}
.goods-item .itemMessage {
	flex: 1;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
	/* align-items: center; */
	padding: 0 10rpx;
}
.goods-item .itemMessage .messText {
	font-size: 28rpx;
	font-weight: 200;
}
.messText {
	color: #000;
}
.messPrice {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.messPrice text:nth-child(2) {
	font-size: 28rpx;
	color: #666;
}
.goods-item .itemMessage .pricetext {
	font-size: 28rpx;
	font-weight: 200;
	/* color:rgb(255, 149, 64) ; */
}
.omshop {
	font-size: 28rpx;
	color: #333333;
}
.orderMsg {
	margin: 20rpx auto;
	padding: 30rpx;
	box-sizing: border-box;
	width: 95%;
	background-color: #ffffff;
	border-radius: 40rpx;
	display: flex;
	flex-direction: column;
	position: relative;
}
.address {
	margin: 0 auto;
	padding: 30rpx;
	box-sizing: border-box;
	width: 95%;
	background-color: #ffffff;
	border-radius: 40rpx;
	display: flex;
	flex-direction: column;
	position: relative;
	top: 10rpx;
}
.address text {
	color: #333;
	margin: 10rpx 0;
}
.address text:nth-child(2) {
	font-size: 24rpx;
}
.addressImg {
	width: 40rpx;
	position: absolute;
	right: 40rpx;
	top: 50%;
	transform: translate(0, -50%);
	opacity: 0.7;
}
.container {
	width: 100vw;
	height: 100vh;
	background-color: rgb(248, 248, 248);
	padding-bottom: 98rpx;
	box-sizing: border-box;
}
</style>
